<template class="modalView-page">
  <a-modal
    class="son"
    :visible="visible"
    :width="width"
    :maskClosable="false"
    :okText="okText"
    :forceRender="true"
    :closable="showClose"
    :cancelText="cancelText"
    :maskStyle="{ background: 'rgba(153,153,153,0.40)' }"
    @ok="handleOk"
    @cancel="handleCancel"
  >
    <slot></slot>
  </a-modal>
</template>

<script lang="ts" setup>
interface ModalData {
  visible: boolean
  width: number
  okText?: string
  cancelText?: string
  showFooter?: boolean
  showClose?: boolean
}
withDefaults(defineProps<ModalData>(), {
  visible: false,
  width: 520,
  okText: '确认',
  cancelText: '取消',
  showClose: true
})
const emit = defineEmits(['update:visible', 'confirm', 'cancel'])
// const visible = computed({
//   get: () => {
//     return props.visible
//   },
//   set: (value: any) => {
//     console.log('value: ', value)
//     emit('update:visible', value)
//   }
// })
const handleOk = () => {
  emit('confirm', false)
}
const handleCancel = () => {
  emit('cancel')
}
</script>
<style lang="less">
.ant-modal-body {
  padding: 32px 40px;
  box-sizing: border-box;
}

.ant-modal-header {
  background: rgba(0, 0, 0, 0.04) !important;
  border: none !important;

  .ant-modal-title {
    color: #262626;
  }
}

.ant-modal-footer {
  border: none;
  border-radius: 0 0 2px 2px;
  padding: 0 40px 24px;

  .ant-btn-primary {
    margin-left: 16px !important;
  }
}

.ant-modal-content {
  border-radius: 6px;

  .ant-modal-close {
    color: #000 !important;
  }
}
</style>
